<template>
	<view class="my">
		<view class="my-title">
			<view class="my-title-info">
				<uni-list :border="false">
					<uni-list-item :border="false" v-if="hotelData.loin">
						<!-- 自定义 header -->
						<view slot="header" class="slot-box" @click="setClick('material')">
							<image class="slot-main-image" :src="hotelData.avatar[0]"></image>
						</view>
						<!-- 自定义 body -->
						<view slot="body" class="slot-main">
							<view class="slot-main-name">
								{{hotelData.nickname}}
							</view>
							<view class="slot-main-shouquan">
								<view class="slot-main-score">{{hotelData.phone || ''}}</view>
								
							</view>
							<view class="shouquan" style="color: black;">
								<text @click="openClick"
									v-if="!hotelData.wxopenid">授权获取实时消息</text>
						<!-- 		<uni-icons class=" iocn" type="right" color="#fff" size="28r"></uni-icons> -->
							</view>
							<view class="personal" @click="setClick('material')">个人资料</view>
						</view>
					</uni-list-item>
					<uni-list-item :border="false" v-else>
						<!-- 自定义 header -->
						<view slot="header" class="slot-box">
							<image class="slot-main-image" :src="imgUrl3"></image>
						</view>
						<!-- 自定义 body -->
						<view slot="body" class="slot-main">
							<button class='but' type='primary' withCredentials="true" lang="zh_CN"
								@click="loinClick">立即登录</button>
						</view>
					</uni-list-item>
				</uni-list>
			</view>
			<view class="m-title-con">
				<view class="money">
					<view class="balance" :key="item.id" v-for="item in fund" @click="money(item)">
						<text class="text1">￥<text class="text2">{{item.money || '0.00'}}</text></text>
						<text class="text3">{{item.text || ''}}</text>
					</view>
				</view>
				<view class="dins">
					<view class="box">
					</view>
				</view>
			</view>
		</view>
		<view class="my-main">
			<uni-list :border="false">
				<template v-if="hotelData.admin < 2 || hotelData.admin == null">
					<uni-list-item :key="item.id" v-for="(item) in data" :border="false" clickable
						@click="onClick(item)">
						<!-- 自定义 header -->
						<view slot="header" class="main-img">
							<image class="img-1" :src="item.img" mode="aspectFit"></image>
						</view>
						<!-- 自定义 body -->
						<view slot="body" class="main-body">
							<text class="slot-main-title">{{item.title || ''}}</text>
							<view class="img-ioc">
								<view v-if="item.id == 0"
									style="display: flex;align-items: center;margin-right: 20rpx;">
									<image class="img-2" :src="hotelData.state == 1?rzz:hotelData.state == 2?yrz:wrz"
										mode="aspectFit" />
								</view>
								<uni-icons type="right" color="#C1C1C1" :size="'32r'" />
							</view>
						</view>
					</uni-list-item>
				</template>
				<template v-if="hotelData.admin == 2">
					<uni-list-item :key="item.id" v-for="(item) in data1" :border="false" clickable
						@click="onClick(item)">
						<!-- 自定义 header -->
						<view slot="header" class="main-img">
							<image class="img-1" :src="item.img" mode="aspectFit"></image>
						</view>
						<!-- 自定义 body -->
						<view slot="body" class="main-body">
							<text class="slot-main-title">{{item.title || ''}}</text>
							<view class="img-ioc">
								<view v-if="item.id == 0"
									style="display: flex;align-items: center;margin-right: 20rpx;">
									<image class="img-2" :src="hotelData.state == 1?rzz:hotelData.state == 2?yrz:wrz"
										mode="aspectFit" />
								</view>
								<uni-icons type="right" color="#C1C1C1" :size="'32r'" />
							</view>
						</view>
					</uni-list-item>
				</template>
			</uni-list>
		</view>
		<uni-popup ref="popup" @change="change" :mask-click="false">
			<view class="popup">
				<view class="popup-img">
					<image class="img" :src="imgUrl" mode=""></image>
					<view class="popup-text">
						<view class="text">企业认证</view>
						<view class="text1">您还未进行企业实名认证</view>
						<view class="text1">认证成功后</view>
						<view class="text1">即可开启更多服务</view>
						<view class="but">
							<button class="butt" plain @click="renzheng('enterprise')">立即认证</button>
						</view>
					</view>
				</view>
				<uni-icons class="ionc" type="close" size="68r" @click="close"></uni-icons>
			</view>
		</uni-popup>
		<uni-popup ref="popup1" @change="change1" :mask-click="false">
			<view class="get-tel">
				<uni-icons class="ionc" type="closeempty" size="50r" @click="goBack"></uni-icons>
				<view class="tel-title">
					提示
				</view>
				<view class="tel-text">您未绑定手机号，需要绑定手机号才可体验更多功能</view>
				<view class="but">
					<button class="butt" plain open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">绑定手机号</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: `${getApp().globalData.imgScr}jd/rengzheng.png`,
				wrz: `${getApp().globalData.imgScr}jd/wrz.png`,
				rzz: `${getApp().globalData.imgScr}jd/rzz.png`,
				yrz: `${getApp().globalData.imgScr}jd/yrz.png`,
				imgUrl3: `${getApp().globalData.imgScr}jd/uimg.svg`,
				url: '/hotelAdmin/my', // 页面跳转公共的地址
				hotelData: uni.getStorageSync('hotelData') || {}, // 酒店请求缓存信息
				fund: [{
						id: 1,
						money: 0,
						text: '账户余额',
						path: 'pay',
					},
					{
						id: 2,
						money: 0,
						text: '保证金',
						path: 'deposit'
					}
				],
				// 菜单栏 数据 企业端
				data: [
					// {
					// 	id: 0,
					// 	title: '企业认证',
					// 	img: `${getApp().globalData.imgScr}jd/qiye.png`,
					// 	path: 'enterprise'
					// },
					{
						id: 2,
						title: '我的收藏',
						img: '/static/imgas/wodeshouchang.png',
						// img: `${getApp().globalData.imgScr}jd/wodeshouchang.png`,
						path: 'collect'
					}, 
					{
						id: 3,
						title: '我的账单',
						img: '/static/imgas/wodedingdan.png',
						// img: `${getApp().globalData.imgScr}jd/wodedingdan.png`,
						path: 'check'
					}, 
					// {
					// 	id: 4,
					// 	title: '地址管理',
					// 	img: `${getApp().globalData.imgScr}jd/dizhiguanli.png`,
					// 	path: 'address'
					// }, 
					{
						id: 5,
						title: '申请发票',
						img: '/static/imgas/shengqingfapiao.png',
						// img: `${getApp().globalData.imgScr}jd/shengqingfapiao.png`,
						path: 'invoice'
					}, 
					// {
					// 	id: 6,
					// 	title: '联系客服',
					// 	img: `${getApp().globalData.imgScr}jd/lianxikefu.png`,
					// 	path: 'service'
					// }, 
					{
						id: 7,
						title: '意见反馈',
						img: '/static/imgas/fankuiyijian.png',
						// img: `${getApp().globalData.imgScr}jd/fankuiyijian.png`,
						path: 'feedback'
					}, 
					// {
					// 	id: 8,
					// 	title: '投诉记录',
					// 	img: `${getApp().globalData.imgScr}jd/wgts.png`,
					// 	path: 'complaints-Recording'
					// }, 
					{
						id: 9,
						title: '管理员',
						img: '/static/imgas/guanliyuan.png',
						// img: `${getApp().globalData.imgScr}jd/guanliyuan.png`,
						path: 'administrator'
					}, 
					{
						id: 10,
						title: '设置',
						img: '/static/imgas/shezhi.png',
						// img: `${getApp().globalData.imgScr}jd/shezhi.png`,
						path: 'setting',
					}
				],
				data1: [
					// {
					// 	id: 0,
					// 	title: '企业认证',
					// 	img: `${getApp().globalData.imgScr}jd/qiye.png`,
					// 	path: 'enterprise'
					// },
					// {
					// 	id: 1,
					// 	title: '我的长期工',
					// 	img: `${getApp().globalData.imgScr}jd/changqigong.png`,
					// 	path: 'permanent-worker'
					// }, 
					{
						id: 2,
						title: '我的收藏',
						// img: `${getApp().globalData.imgScr}jd/wodeshouchang.png`,
						img: '/static/imgas/wodeshouchang.png',
						path: 'collect'
					}, 
					{
						id: 3,
						title: '我的账单',
						img: `${getApp().globalData.imgScr}jd/wodedingdan.png`,
						path: 'check'
					}, 
					{
						id: 4,
						title: '地址管理',
						img: `${getApp().globalData.imgScr}jd/dizhiguanli.png`,
						path: 'address'
					}, 
					{
						id: 5,
						title: '联系客服',
						img: `${getApp().globalData.imgScr}jd/lianxikefu.png`,
						path: 'service'
					}, 
					{
						id: 6,
						title: '意见反馈',
						img: `${getApp().globalData.imgScr}jd/fankuiyijian.png`,
						path: 'feedback'
					}, 
					{
						id: 7,
						title: '投诉记录',
						img: `${getApp().globalData.imgScr}jd/fankuiyijian.png`,
						path: 'complaints-Recording'
					}, 
					{
						id: 8,
						title: '设置',
						img: `${getApp().globalData.imgScr}jd/shezhi.png`,
						path: 'setting'
					}
				]
			};
		},
		async onShow() {
			let _this = this
			try {
				// 判断登录状态
				if (uni.getStorageSync('hotelData').loin) {
					if (!this.hotelData.phone) return uni.hideTabBar({
						animation: true,
						success: function() {
							_this.$refs.popup1.open('center')
						}
					})
					let rep = await this.$http.post('/index/Hotelpersonal/hotelbalance')
					// this.$set(this.hotelData, 'state', rep.status) // 酒店认证状态
					if (rep.status == 3) this.$refs.popup.open('center')
					this.fund[0].money = rep.balance
					this.fund[1].money = rep.bond
					await this.userinfo()
					// 显示底部tabs 栏
					// uni.showTabBar({
					// 	animation:true
					// })
				} else {
					//如果未登录 清空本地缓存 重新登录
					uni.removeStorageSync('hotelData');
					uni.removeStorageSync('openid');
					this.hotelData = {}
					// uni.showTabBar({
					// 	animation:false
					// })
				}
			} catch (e) {
				//TODO handle the exception
				if (e.statusCode == 1003) {
					setTimeout(function() {
						uni.hideTabBar({
							animation: true,
							success: function() {
								_this.$set(_this.hotelData, 'state', 3)
								console.log('酒店认证状态 ===>', _this.hotelData)
								// uni.setStorageSync('hotelData', _this.hotelData);
								uni.setStorage({
									key: 'hotelData',
									data: _this.hotelData,
									success: function() {
										console.log('success');
									}
								});
								_this.$refs.popup.open('center')
							}
						})
					}, 100);
				} else {
					Object.assign(this.$data, this.$options.data())
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			}
		},
		onLoad() {
			getApp().globalData.type = 1
		},
		onPullDownRefresh() {
			// 下拉刷新时触发
			console.log('refresh');
			setTimeout(function() {
				uni.showToast({
					title: "刷新成功",
					icon: "none"
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			/**
			 * 修改个人信息
			 * @param {Object} path 跳转的页面地址
			 */
			setClick(path) {
				uni.navigateTo({
					url: `${this.url}/${path}/${path}`,
				});
			},
			/**
			 * 菜单栏 操作事件
			 * @param {string} data 当前菜单栏的名称
			 * @param {Object} path 当前菜单栏需要跳转页面的地址
			 */
			onClick: function(data) {
				if (uni.getStorageSync('hotelData').loin) {
					uni.navigateTo({
						url: `${this.url}/${data.path}/${data.path}`,
					});
					// if (uni.getStorageSync('hotelData').state == 2) {
						
					// } else {
					// 	if (data.title == "设置" || data.title == "企业认证" || data.title == "联系客服") {
					// 		uni.navigateTo({
					// 			url: `${this.url}/${data.path}/${data.path}`,
					// 		});
					// 	} else {
					// 		uni.showToast({
					// 			title: "认证通过后方可体验更多功能！",
					// 			icon: "none"
					// 		})
					// 	}
					// }
				} else {
					if (data.title == "设置" || data.title == "联系客服") {
						uni.navigateTo({
							url: `${this.url}/${data.path}/${data.path}`,
						});
					} else {
						uni.showToast({
							title: "登录后才可体验更多功能！",
							icon: "none"
						})
					}

				}

			},
			/**
			 * 余额及保证金 卡片点击事件
			 * @param {string} path 对应页面的地址
			 */
			money: function(item) {
				if (!uni.getStorageSync('hotelData').loin) return uni.showToast({
					title: "登录后方可体验更多功能！",
					icon: "none"
				})
				// else if (uni.getStorageSync('hotelData').state != 2) return uni.showToast({
				// 	title: "认证通过后方可体验更多功能！",
				// 	icon: "none"
				// })
				else if (uni.getStorageSync('hotelData').admin != 1) return uni.showToast({
					title: "暂无权限！",
					icon: "none"
				})
				uni.navigateTo({
					url: '/pages/tag/hotel/hotel?type=' + item.id
					// url: `${this.url}/${path}/${path}`,
				});
			},
			/**
			 * 企业认证 弹窗状态发生变化时触发
			 * @param {Object} e 弹窗状态的数据
			 */
			change: function(e) {
				console.log(e)
			},
			/**
			 * 企业认证 关闭弹窗的方法
			 */
			close: function() {
				this.$refs.popup.close('center')
				uni.showTabBar({
					animation: true
				})
			},
			/**
			 * 获取手机号权限 弹窗状态发生变化时触发
			 * @param {Object} e 弹窗状态的数据
			 */
			// change1: function(e) {
			// 	console.log(e)
			// },
			/**
			 * 立即认证按钮 事件
			 * @param {string} path 需要跳转的页面路径
			 */
			renzheng: function(path) {
				this.$refs.popup.close('center')
				uni.showTabBar({
					animation: true
				})
				uni.navigateTo({
					url: `${this.url}/${path}/${path}`,
				});


			},

			/**
			 * 立即登录 触发事件
			 */
			async loinClick() {
				let _this = this
				try {
					let res = await uni.getUserProfile({
						desc: '用于小程序功能使用'
					})
					if (res[0] != null) throw new Error(JSON.stringify(res[0]))
					await this.login(res[1].userInfo)
					// 获取酒店信息
					// let hotelinfo = await this.$http.post('/index/Hotelpersonal/hotelinfo')
					// console.log('酒店信息', hotelinfo);
					// this.$set(this.hotelData, 'state', hotelinfo.status) // 酒店认证状态
					// this.$set(this.hotelData, 'hotel_name', hotelinfo.hotel_name) // 酒店认证状态
					// this.fund[0].money = hotelinfo.balance // 账户余额
					// this.fund[1].money = hotelinfo.bond // 保证金余额
					// uni.setStorageSync('hotelData', this.hotelData);
				} catch (e) {
					if (e.message && JSON.parse(e.message).statusCode) {
						if (JSON.parse(e.message).statusCode == 1004) {
							// 未绑定手机号时 弹出绑定提示框
							uni.hideTabBar({
								animation: true,
								success: function() {
									_this.$refs.popup1.open('center')
								}
							})
						} else if (JSON.parse(e.message).statusCode == 1003) {
							// 未认证酒店 弹出认证提示框
							uni.hideTabBar({
								animation: true,
								success: function() {
									_this.$refs.popup.open('center')
								}
							})
						} else {
							uni.showToast({
								title: JSON.parse(e.message).errMsg,
								icon: 'none',
							})
						}
					} else if (e.statusCode) {
						if (e.statusCode == 1004) {
							// 未绑定手机号时 弹出绑定提示框
							uni.hideTabBar({
								animation: true,
								success: function() {
									_this.$refs.popup1.open('center')
								}
							})
						} else if (e.statusCode == 1003) {
							// 未认证酒店 弹出认证提示框
							uni.hideTabBar({
								animation: true,
								success: function() {
									_this.$refs.popup.open('center')
								}
							})
						} else {
							uni.showToast({
								title: e.errMsg,
								icon: 'none',
							})
						}
					} else {
						uni.showToast({
							title: e.errMsg,
							icon: "none"
						})
					}
				}
			},
			/**
			 * 微信登录
			 * @param {Object} info 授权成功获取的用户信息
			 */
			async login(info) {
				let _this = this
				uni.showLoading({
					title: '登录中....'
				})
				try {
					/** === 1.wx获取登录用户code === */
					let res = await uni.login({
						provider: 'weixin'
					})
					// 判断是否登录成功
					if (res[0] != null) throw new Error(JSON.stringify(res[0]))
					// 获取code
					let code = res[1].code

					/** === 2.wx获取登录用户openid 等信息 === */
					let rep = await _this.$http.post('/index/Login/getuserinfo', {
						code
					})
					// 保存session_key  用于手机号获取解密 
					this.$set(this.hotelData, 'session', rep.session_key)
					// 保存 openid
					this.$set(this.hotelData, 'openid', rep.openid)
					uni.setStorageSync('openid', rep.openid);
					/** === 3.请求获取 token === */
					await this.getuid(info, rep.openid, rep.unionid)

					/** === 4.请求获取 手机号 === */
					let reo = await this.$http.post('/index/Login/getphone')
					console.log('用户手机号', reo.phone)
					// 保存用户手机
					this.$set(this.hotelData, 'phone', reo.phone)

					// 本地同步缓存 登录获取的相关信息
					uni.setStorageSync('hotelData', this.hotelData);

				} catch (e) {
					uni.hideLoading()
					//TODO handle the exception
					throw new Error(JSON.stringify(e))
				}
				uni.hideLoading()
			},
			/**
			 * 获取 token
			 */
			async getuid(info, openid, unionid) {
				try {
					let res = await this.$http.post('/index/Login/getuid', {
						openid: openid,
						unionid: unionid,
						parent_openid: uni.getStorageSync('parent_openid') || '',
						type: 1,
						userInfo: {
							nickname: info.nickName,
							avatar: info.avatarUrl,
							gender: info.gender,
						}
					})
					// 保存token
					this.$set(this.hotelData, 'token', res.token)
					// 缓存token 到本地
					uni.setStorageSync('hotelData', this.hotelData);
					// 获取用户信息
					await this.userinfo()
				} catch (e) {
					console.log('获取数据失败2', e)
					throw new Error(e)
				}
			},
			/**
			 * 获取用户信息 
			 */
			async userinfo() {
				try {
					let res = await this.$http.post('/index/Login/userinfo')
					this.$set(this.hotelData, 'nickname', res.nickname) // 昵称
					this.$set(this.hotelData, 'avatar', res.avatar) // 头像
					this.$set(this.hotelData, 'gender', res.gender) // 性别
					this.$set(this.hotelData, 'phone', res.phone) // 电话 
					this.$set(this.hotelData, 'loin', true) // 更改登录状态
					this.$set(this.hotelData, 'admin', res.is_hotel_admin) // 管理状态
					this.$set(this.hotelData, 'wxopenid', res.wxopenid) // 微信公众openid
					this.$set(this.hotelData, 'real_name', res.real_name) // 微信公众openid
					uni.setStorageSync('hotelData', this.hotelData);
				} catch (e) {
					console.log('获取数据失败3', e)
					throw new Error(e)
				}
			},
			/**
			 * 获取手机号权限 弹窗状态发生变化时触发
			 * @param {Object} e 弹窗状态的数据
			 */
			change1: function(e) {
				console.log(e)
			},
			/**
			 * 绑定手机号弹窗 关闭返回首页
			 */
			goBack() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
				uni.removeStorageSync('hotelData');
				uni.removeStorageSync('openid');
				this.$refs.popup1.close('center')
			},
			/**
			 * 认证手机号 按钮触发事件
			 *  @param {Object} e 手机认证成功后返回的数据
			 */
			async decryptPhoneNumber(e) {
				console.log(e)
				// 请求参数
				let data = {
					session: this.hotelData.session,
					iv: e.target.iv,
					encryptedData: e.target.encryptedData
				}
				try {
					// 获取用户手机号码
					let res = await this.$http.post('/index/Login/decryptphone', data)
					console.log('成功后2', res);
					// 保存用户手机
					this.hotelData.phone = res.phoneNumber

					// 将手机号码发送到服务器
					let phoneData = await this.$http.post('/index/Login/updatephone', {
						phone: res.phoneNumber
					})
					// 关闭 绑定手机号弹窗
					this.$refs.popup1.close('center')
					// 同步保存数据到本地 token 登录状态 认证状态 手机号
					uni.setStorageSync('hotelData', this.hotelData);

					// 判断是否弹出个人认证窗口
					this.$refs.popup.open('center')

				} catch (e) {
					console.log('获取数据失败4', e)
					// 拒绝后返回手机认证弹窗
					// this.hotelData = {};
					// uni.removeStorageSync('hotelData');
					// uni.removeStorageSync('openid');
					// return
				}
			},
			openClick() {
				console.log('123')
				uni.navigateTo({
					url: '../../../hotelAdmin/SinglepageHotel/SinglepageHotel'
				});
			},
		}
	}
</script>

<style lang="scss">
	.my {
		position: relative;
		margin-bottom: 20rpx;

		.uni-list {
			background-color: rgba($color: #000000, $alpha: 0);
		}

		.uni-list-item {
			background-color: rgba($color: #000000, $alpha: 0);
		}

		.my-title {
			width: 100%;
			height: 406rpx;
			background-color: #8dc9f1;
			// background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
		}

		.my-title-info {
			.slot-box {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				margin-right: 40rpx;
				overflow: hidden;

				.slot-main-image {
					width: 100%;
					height: 100%;
				}
			}

			.slot-main {
				display: flex;
				flex-direction: column;
				justify-content: center;

				&-shouquan {
					display: flex;
				}

				.shouquan {
					font-size: 28rpx;
					font-weight: 500;
					color: #fff;
				}

				.slot-main-name {
					font-size: 34rpx;
					color: #000000;
					margin-bottom: 20rpx;
				}

				.slot-main-score {
					font-size: 28rpx;
					color: #000000;
					margin-right: 20rpx;

					.img-14 {
						width: 20rpx;
						height: 20rpx;
						margin-left: 6rpx;
					}
				}

				.but {
					font-size: 34rpx;
					// width: 560rpx;
					font-weight: 600;
					color: #000000;
					background-color: rgba($color: #000000, $alpha: 0);
					border-radius: 48rpx;
					line-height: 96rpx;
					padding: 0 20rpx;
					border: 0;
				}

				.but::after {
					display: none;
				}
			}
		}

		.m-title-con {
			position: relative;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.money {
				display: flex;
				align-items: center;

				.balance {
					flex: 1;
					display: flex;
					height: 150rpx;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background-color: #ffffff;
					border-radius: 20rpx 20rpx 0 0;
					margin: 10rpx;
					z-index: 2;
					color: #000000;

					.text1 {
						font-size: 30rpx;
						margin-bottom: 10rpx;
						font-weight: 600;

						.text2 {
							font-size: 40rpx;
						}
					}

					.text3 {
						font-size: 24rpx;
						color: rgba($color: #000000, $alpha: 0.7);
					}
				}
			}

			.dins {
				position: absolute;
				left: 0;
				bottom: 0;
				box-sizing: border-box;
				height: 18rpx;
				width: 100%;
				padding: 0 15rpx;
				z-index: 0;

				.box {
					height: 100%;
					width: 100%;
					background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					border-radius: 9rpx;
				}
			}
		}

		.my-main {
			width: 100%;
			background-color: #ffffff;
			border-radius: 40rpx;
			z-index: 4;
			margin-top: -40rpx;
			overflow: hidden;

			.main-img {
				.img-1 {
					width: 53rpx;
					height: 60rpx;
					background-color: rgba($color: #000000, $alpha: 0);
				}
			}

			.main-body {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-left: 20rpx;

				.slot-main-title {
					font-size: 28rpx;
					color: #000000;
					font-weight: 500;
				}

				.img-ioc {
					display: flex;
					align-items: center;

					.img-2 {
						width: 104rpx;
						height: 34rpx;
						background-color: rgba($color: #000000, $alpha: 0);
					}
				}

			}
		}

		.popup {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.popup-img {
				position: relative;
				width: 508rpx;
				height: 670rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 60rpx;

				.img {
					width: 100%;
					height: 100%;
				}

				.popup-text {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;

					.text {
						font-size: 54rpx;
						font-weight: bold;
						color: #000000;
						margin-bottom: 100rpx;
						padding-left: 40rpx;
					}

					.text1 {
						font-size: 28rpx;
						color: #000000;
						padding-left: 40rpx;
					}

					.but {
						display: flex;
						justify-content: center;
						width: 100%;
						margin: 100rpx 0 80rpx;

						.butt {
							width: 70%;
							color: #FFFFFF;
							background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
							border-radius: 40rpx;
							line-height: 80rpx;
							border: 0;
							margin: 0 20rpx;
						}
					}
				}
			}

			.ionc {
				.uni-icons {
					color: rgba($color: #ffffff, $alpha: 0.6) !important;
					font-weight: 100;
				}
			}
		}

		.get-tel {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 508rpx;
			padding: 40rpx;
			border-radius: 20rpx;
			overflow: hidden;
			background-color: #FFFFFF;

			.ionc {
				position: absolute;
				top: 16rpx;
				right: 16rpx;
			}

			.tel-title {
				font-size: 50rpx;
				color: #000000;
				font-weight: 500;
				margin-bottom: 40rpx;
			}

			.tel-text {
				font-size: 32rpx;
				color: #737373;
				font-weight: 500;
				text-align: center;
			}

			.but {
				display: flex;
				justify-content: center;
				width: 100%;
				margin-top: 100rpx;

				.butt {
					font-size: 40rpx;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					border-radius: 40rpx;
					line-height: 80rpx;
					border: 0;
					padding: 0 60rpx;
				}
			}
		}
	}
	.personal{
		position: absolute;
		right: 0;
		width: 170rpx;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		border-radius: 64rpx 0 0 64rpx;
		top: 50%;
		transform: translateY(-50%);
		font-size: 30rpx;
		color: #000;
		background-color: #8dc9f1;
		z-index: 222;
	}
</style>
